import React from 'react';
import { Button } from 'antd';
import { increment, decrement, incrementByAmount } from '@/store/reducers';
import { useSelector, useDispatch } from 'react-redux';
import SvgIcon from '@/components/SvgIcon';
const Home: React.FC = () => {
  const count = useSelector((store: any) => store.value);

  const dispatch = useDispatch();

  const navigator = useNavigate();

  const handleIncrement = () => {
    dispatch(increment());
  };

  const handleDecrement = () => {
    dispatch(decrement());
  };

  const handleIncrementByAmount = () => {
    dispatch(incrementByAmount(5));
  };

  const linkToAbout = () => {
    navigator('/about');
  };

  return (
    <>
      <div className="p-10 bg-gray1 shadow flex-center">
        {count}
        
        <SvgIcon className="ml-2" name="home" size={16} />
      </div>

      <div className="flex-center p-5">
        <Button onClick={handleIncrement} className="mr-2">
          + 1
        </Button>
        <Button onClick={handleDecrement} className="mr-2">
          -1
        </Button>
        <Button onClick={handleIncrementByAmount} className="mr-2">
          + 5
        </Button>
        <Button onClick={linkToAbout} type="primary">
          About 页面
        </Button>
      </div>
    </>
  );
};

export default Home;
